<template>
    <div class="component-blocktext">
        <template v-for="(item, index) in config">
            <div v-show="show(item)" :key="`component-blocktext-${index}`" class="component-blocktext--item" >
                <span class="component-blocktext--name" v-html="item.label"></span>
                <span>：</span>
                <span class="component-blocktext--text" @click="()=>item.click ? item.click() : false" v-html="text(item)" ></span>
            </div>
        </template>
    </div>
</template>

<script>
    import { get } from 'dot-prop';

    export default {
        props: {
            config: {
                type: Array,
                default: () => []
            },
            detail: {
                type: Object,
            },
        },
        methods: {
            show() {
                return true;
            },
            text(item) {
                if (item.text) {
                    return item.text(this.detail);
                }
                if (item.field) {
                    return get(this.detail, item.field) || '--';
                }
                return '--';
            }
        }
    };
</script>

<style lang="scss">
    .component-blocktext {
        display: flex;
        flex-wrap: wrap;
        &--item {
            flex: none;
            width: 49%;
            display: flex;
            // align-items: center;
            padding: 10px 0;
        }
        &--name {
            width: 180px;
            text-align: right;
            display: block;
            font-weight: 500;
        }
        &--name {
            display: block;
        }
        &--text {
            width: calc(100% - 200px);
        }
        p {
            margin: 0;
        }
    }

    .sale {
        background: #f7f7fa;
        margin-bottom: 20px;
    }

    .link {
        cursor: pointer;
        color: #008000;
    }
</style>
